<script setup>
import { inject } from 'vue';

const OpGte = inject('OpGte');
const using = inject('using');
const toggleUsingDrag = inject('toggleUsingDrag');
</script>

<template>
  <aside class="tool-bar">
    <template v-if="OpGte('审核')">
      <a-button title="批注" :disabled="'comment' == using" @click="() => using = 'comment'">
        <svg t="1686881938397" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5622" width="26" height="26"><path d="M670.6 65.1l154.2 154.2-549.9 549.9H120.7V626c0-4.3-0.1-7.9 0-11L670.6 65.1m0-65.1C654.8 0 639 6 627 18.1L74.8 570.2c-18.9 18.9-18.1 19.6-18.1 60.1 0 202.2 0.1 202.8 0.1 202.8s0.6 0.1 183.3 0.1h27.6c32.7 0 34.6-0.6 52.1-18.2l552-552c24.1-24.1 24.1-63.2 0-87.3L714.2 18.1C702.2 6 686.4 0 670.6 0z" p-id="5623"></path><path d="M534.996 200.712l45.325-45.325 154.148 154.148-45.325 45.325zM935.3 826.8H670.2c-17.7 0-32.1-14.4-32.1-32.1s14.4-32.1 32.1-32.1h265.1c17.7 0 32.1 14.4 32.1 32.1s-14.4 32.1-32.1 32.1zM935.3 1024H88.7c-17.7 0-32.1-14.4-32.1-32.1s14.4-32.1 32.1-32.1h846.6c17.7 0 32.1 14.4 32.1 32.1S953 1024 935.3 1024z" p-id="5624"></path></svg>
      </a-button>
    </template>

    <template v-if="OpGte('标注')">
      <a-button title="移动工具" :disabled="'none' == using" @click="() => using = 'none'">
        <svg t="1686725236526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14262" width="26" height="26"><path d="M573.59 617.76l118.15 253.6c6.65 14.37 0.53 31.14-13.84 37.79l-103.25 48.17c-14.37 6.65-31.13 0.53-37.79-13.84l-120.8-259.19L267.3 833.04c-11.18 11.18-29.01 11.18-40.18 0-5.32-5.32-8.25-12.51-8.25-20.22V92.47c0-15.7 12.77-28.47 28.47-28.47 7.19 0 13.84 2.66 19.16 7.45l529.28 481.38c11.71 10.64 12.51 28.47 1.86 40.18-4.79 5.32-11.71 8.78-18.89 9.31l-205.16 15.44z" p-id="14263"></path></svg>
      </a-button>
    </template>
    
    <a-button
      title="拖拽画布"
      :style="{ color: ['drag', 'dragging'].includes(using) ? '#40a9ff' : '' }"
      @click="toggleUsingDrag">
      <template v-if="'dragging' == using">
        <svg t="1711509675939" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11823" width="30" height="30"><path d="M607.573333 904.533333h-211.626666C290.133333 904.533333 204.8 819.2 204.8 716.8v-78.506667l-75.093333-75.093333c-37.546667-37.546667-37.546667-95.573333 0-133.12 17.066667-17.066667 37.546667-23.893333 58.026666-27.306667-30.72-37.546667-27.306667-92.16 6.826667-126.293333 27.306667-30.72 78.506667-34.133333 112.64-13.653333 0-23.893333 10.24-44.373333 27.306667-61.44 34.133333-34.133333 95.573333-34.133333 133.12 0 3.413333-20.48 13.653333-37.546667 30.72-54.613334 34.133333-34.133333 95.573333-34.133333 133.12 0l215.04 221.866667c51.2 51.2 81.92 122.88 81.92 197.973333 0 81.92-23.893333 150.186667-71.68 197.973334l-75.093334 71.68c-54.613333 44.373333-112.64 68.266667-174.08 68.266666zM238.933333 672.426667V716.8c0 85.333333 71.68 153.6 157.013334 153.6h211.626666c51.2 0 102.4-20.48 139.946667-58.026667l75.093333-71.68c40.96-40.96 61.44-102.4 61.44-174.08 0-64.853333-23.893333-126.293333-71.68-174.08l-61.44-68.266666L600.746667 170.666667c-20.48-23.893333-61.44-23.893333-81.92 0-20.48 20.48-30.72 51.2-6.826667 78.506666l13.653333 13.653334c6.826667 6.826667 6.826667 17.066667 0 23.893333-6.826667 6.826667-17.066667 6.826667-23.893333 0l-13.653333-13.653333-3.413334-3.413334-44.373333-47.786666c-20.48-23.893333-61.44-23.893333-81.92 0-23.893333 23.893333-23.893333 61.44 0 85.333333l47.786667 54.613333c6.826667 6.826667 6.826667 17.066667 0 23.893334-6.826667 6.826667-17.066667 6.826667-23.893334 0L300.373333 300.373333c-20.48-20.48-61.44-20.48-81.92 0-23.893333 23.893333-23.893333 61.44 0 85.333334l81.92 78.506666c6.826667 6.826667 6.826667 17.066667 0 23.893334s-17.066667 6.826667-23.893333 0l-37.546667-34.133334c-23.893333-23.893333-61.44-23.893333-85.333333 0s-23.893333 61.44 0 85.333334l163.84 167.253333c6.826667 6.826667 6.826667 17.066667 0 23.893333-6.826667 6.826667-17.066667 6.826667-23.893333 0L238.933333 672.426667z" fill="" p-id="11824"></path></svg>
      </template>
      <template v-else>
        <svg t="1686725472088" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16319" width="30" height="30"><path d="M653.312 932.864H378.368c-9.728 0-18.432-4.096-24.576-11.776-0.512-0.512-46.592-56.32-104.96-116.736-23.552-24.064-49.152-43.52-71.68-60.928-34.816-26.624-65.024-49.664-75.776-81.408-5.12-12.288-7.68-24.576-7.68-37.376 0-52.224 41.984-94.72 94.72-95.744 28.16-3.072 60.416 7.168 90.624 21.504-40.448-92.16-91.136-218.624-89.088-263.68 1.536-42.496 29.696-78.336 72.192-94.208 38.4-13.824 77.312-7.168 99.84 16.896 1.024 1.536 2.56 2.56 3.072 4.096 13.824 21.504 27.648 43.52 40.96 66.56-1.536-57.344 0.512-113.152 11.264-136.704l1.536-3.072c8.704-14.848 21.504-27.136 35.84-35.84 24.064-13.824 51.2-17.92 77.824-10.752 26.112 7.168 48.128 24.064 61.44 47.104 0.512 0.512 0.512 1.024 1.024 2.048 7.68 16.384 12.288 44.544 14.848 77.312 6.656-12.8 13.824-23.04 20.992-29.696 1.024-1.024 2.048-2.048 3.072-2.56 13.312-9.728 28.16-15.872 44.544-17.92 26.624-4.096 53.248 2.56 75.264 18.944 22.016 15.872 35.84 39.936 39.936 66.56v1.536c2.048 20.48-5.12 51.2-15.872 84.992 8.704-5.632 17.408-9.728 25.6-12.288 15.872-6.144 33.28-8.192 50.688-5.12 24.576 4.608 45.568 18.432 59.904 38.912 13.824 20.48 19.456 44.544 14.848 69.12-4.608 31.232-29.184 66.56-60.416 110.592-23.04 32.768-49.152 69.632-63.488 102.912-27.136 76.288-48.128 148.48-65.024 220.16 0 0.512 0 1.024-0.512 1.536-10.24 38.4-46.08 65.024-86.016 65.024z m-260.096-63.488h260.096c11.264 0 21.504-7.68 25.088-18.432 17.408-74.24 39.424-148.992 67.584-227.328 0-0.512 0.512-1.536 1.024-2.048 16.896-39.424 45.056-79.36 70.144-115.2 20.992-30.208 47.104-67.584 49.152-82.944 0-0.512 0-1.024 0.512-2.048 1.536-7.68 0-15.36-4.608-22.016-4.096-6.144-10.752-10.752-18.432-11.776-5.632-1.024-11.264-0.512-15.872 1.536-1.024 0.512-2.048 1.024-3.072 1.024-29.696 9.216-85.504 72.704-115.2 114.688-9.728 13.824-28.16 17.408-42.496 9.216-14.336-8.704-19.968-26.624-12.288-41.472 38.4-78.848 78.336-180.224 76.288-208.384-1.536-9.728-6.656-17.92-14.848-23.552-8.192-6.144-17.92-8.192-27.648-7.168-5.12 0.512-9.728 2.56-14.336 5.12-16.384 18.432-46.592 108.032-65.536 183.296-4.096 15.872-19.456 26.112-35.84 24.064-16.384-2.56-28.16-16.896-27.136-33.792 5.632-95.232 4.608-213.504-7.168-240.64-5.12-8.192-12.8-13.824-21.504-16.384-9.728-2.56-19.968-1.024-28.672 4.096-5.12 3.072-9.216 7.168-12.8 12.288-9.216 25.088-5.632 149.504 3.584 251.904 1.536 15.36-8.704 29.696-23.552 33.792-14.848 4.096-30.72-3.072-37.376-17.408-31.744-67.072-66.56-130.56-104.448-188.928-4.608-3.072-15.872-4.096-29.696 0.512-7.168 2.56-29.696 12.8-30.72 36.864-1.536 34.304 63.488 195.584 126.976 331.264 6.144 13.312 2.56 29.696-9.216 38.4-11.776 9.216-28.16 9.216-39.936 0-38.4-30.208-105.984-70.656-137.216-66.56-1.536 0-2.56 0.512-4.096 0.512-17.92 0-32.256 14.336-32.256 31.744 0 4.608 1.024 8.704 3.072 13.312 0.512 1.024 1.024 2.048 1.024 3.072 4.608 13.824 28.672 32.256 54.272 51.712 24.064 18.432 51.712 39.424 78.336 67.072 45.056 47.616 81.92 90.112 98.816 110.592z" p-id="16320"></path></svg>
      </template>
    </a-button>

    <template v-if="OpGte('标注')">
      <a-button title="画框" :disabled="'rectBox' == using" @click="() => using = 'rectBox'">
        <svg t="1686708781149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4328" width="26" height="26"><path d="M273.9 168.3H739v37.1H273.9zM273.9 819.6H739v37.1H273.9zM165.812 740.898v-465.1h37.1v465.1zM821.11 740.896v-465.1h37.1v465.1z" p-id="4329"></path><path d="M184.7 66.2c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.5c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.7-37 82.7-82.7 82.7zM184.7 717.5c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.6c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.6-37 82.7-82.7 82.7zM840 717.5c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.6c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.6-37 82.7-82.7 82.7zM840 66.2c-66.8 0-121 54.2-121 121s54.2 121 121 121 121-54.2 121-121-54.1-121-121-121z m-0.1 203.5c-45.7 0-82.7-37-82.7-82.7s37-82.7 82.7-82.7 82.7 37 82.7 82.7c0.1 45.7-37 82.7-82.7 82.7z" p-id="4330"></path></svg>
      </a-button>
    </template>
  </aside>
</template>

<style>
.base-label .tool-bar { background: #fff; }

.base-label .tool-bar,
.base-label .tool-bar .ant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.base-label .tool-bar .ant-btn:focus { color: unset; }

.base-label .tool-bar {
  gap: 1.5em;
  padding-top: 1em;
  padding-bottom: 1em;
}

.base-label .tool-bar .ant-btn {
  height: auto;
  border: 0;
  background: transparent;
}

.base-label .tool-bar .ant-btn svg { fill: currentColor; }
</style>
